/**
优先级组件

属性
  options: Array:[{label:String, color:String, value:String}] 优先级的设置项
  icon: String, 最前端要显示的图标样式，default: "el-icon-warning" },
  defaultValue: String, 当前的默认值，需要匹配options.value
  showIcon: Boolean, 是否显示图标，默认true
 */
<template>
  <div class="priority">
    <i :class="icon + ' icon'" :style="{ color }" v-if="showIcon" />
    <label
      class="label"
      role="radio"
      v-for="(item, i) in options"
      :key="i"
      :style="{ ...getStyle(i) }"
      @mouseover="onMouseOver(item, i)"
      @mouseout="onMouseOut(item, i)"
    >
      <input
        type="radio"
        name="priority"
        :ref="'priority' + i"
        :value="item.value"
        @click="onSelect(item, i, $event)"
      />
      <span>{{ item.label }}</span>
    </label>
  </div>
</template>

<script>
export default {
  model: {
    prop:'defaultValue',
    methods: ["change"],
  },
  props: {
    options: {
      type: Array,
      default: () => [
        { label: "紧急", color: "#F56C6C", value: "1" },
        { label: "平急", color: "#E6A23C", value: "2" },
        { label: "普通", color: "#67C23A", value: "3" },
        { label: "较低", color: "#909399", value: "4" },
      ],
    },
    icon: { type: String, default: "el-icon-warning" },
    defaultValue: { type: [String, Number], default: "4" },
    showIcon: { type: Boolean, default: true },
  },
  data() {
    return {
      value: "",
      color: "",
      overColor: "",
      overIndex: -1,
      currect: -1,
    };
  },
  methods: {
    onSelect(item, i, e) {
      e.target.checked = true;
      this.value = item.value;
      this.color = item.color;
      this.currect = i;
      this.$emit("input", this.value);
      this.$emit("change", item, i);
    },
    onMouseOver(item, i) {
      this.overIndex = i;
      this.overColor = item.color;
    },
    onMouseOut(item, i) {
      this.overIndex = -1;
      this.overColor = "";
    },
    getStyle(i) {
      let style = {};
      if (i == this.currect) {
        style.background = this.color;
        style.color = "#fff";
      }
      if (i == this.overIndex) {
        style.background = this.overColor;
        style.color = "#fff";
      }
      if (i == 0) {
        style.borderRadius = "5px 0px 0px 5px";
      } else if (i == this.options.length - 1) {
        style.borderRadius = "0px 5px 5px 0px";
      } else {
        style.borderRadius = "0px";
      }
      return style;
    },
  },
  mounted() {
    this.value = this.defaultValue;
  },
  watch: {
    defaultValue(val) {
      for (let i = 0; i < this.options.length; i++) {
        if (this.$refs["priority" + i][0].value == val) {
          this.$refs["priority" + i][0].checked = true;
          this.overIndex = i;
          this.currect = i;
          this.color = this.options[i].color;
          this.overColor = this.options[i].color;
        } else {
          this.$refs["priority" + i][0].checked = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.priority {
  color: #606266;
  width: fit-content;
  height: 30px;
  line-height: 30px;
}
.label {
  border-width: 1px;
  border-color: #ececec;
  border-style: solid;
  padding: 5px 20px;
  font-size: 14px;
  cursor: pointer;
  input {
    opacity: 0;
    outline: 0;
    z-index: -1;
    position: absolute;
  }
}
.label:hover {
  opacity: 0.8;
  color: #fff;
}
.icon {
  font-size: 24px;
  margin-right: 10px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</style>
